<template>
	<view class="listbox">
	  <view class="product" v-for="(item,index) in goodsList" :key="index" @click="goDetail(item)">
	    <image :src="$util.img(item.goods_image)" mode="aspectFill" class="img" lazy-load></image>
		<view class="info">
	      <view class="product-name ellipsis-2">{{item.goods_name}}</view>
	      <view class="flex-y-center">
				<view class="font-32 c-origin flex-y-baseline text-bold">
					<text class="font-20">¥</text>{{item.price}}
				</view>
				<view class="font-24 c-89 m-l-auto" >
					{{page=='mall'?'已售'+item.sale_num:'销量:'+item.sale_num}}
				</view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		name:"goods",
		props: {
			page: {
				type:String,
				default:''
			},
			goodsList: {
				type:Array,
				default:()=>[]
			}


		},
		data() {
			return {
				
			};
		},
		methods: {
			goDetail(item) {
				this.$util.redirectTo('/otherpages/mall/detail?sku_id='+item.sku_id)
			},
		}
	}
</script>

<style lang="scss" scoped>
.listbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 24rpx 24rpx 0;
  
  .product {
	  position: relative;
    display: flex;
    flex-direction: column;
    width: 330rpx;
    border-radius: $border-radius;
    background: #fff;
    margin-bottom: 30rpx;
    
    .img {
      width: 330rpx;
      height: 330rpx;
      border-radius: 20rpx 20rpx 0 0;
    }
    
    
    .info {
      padding: 20rpx 20rpx 10rpx;
      .product-name {
        height: 78rpx;
        line-height: 1.4;
      }
    }
  }
  
}
</style>